<template>

    <a-card>
        <div class="table-operations">

            <a-button v-permission="['menu:add']" type="primary" @click="addModalBt">日志分析</a-button>

        </div>
        <a-table :columns="columns" size='small' :data-source="data" rowKey="id" :pagination='false'>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">

                    <a-tag v-if="record.status == 0" color="#87d068">成功</a-tag>
                    <a-tag color="#f50" v-if="record.status == 1">失敗</a-tag>
                </template>
                <template v-if="column.key === 'action'">

                    <a-tag v-if="record.action == 'UPDATE'" color="blue">更新</a-tag>
                    <a-tag color="purple" v-if="record.action == 'INSERT'">新增</a-tag>
                    <a-tag color="orange" v-if="record.action == 'DELETE'">刪除</a-tag>
                    <a-tag v-if="record.action == 'SEARCH'" color="blue">查找</a-tag>
                </template>
                <template v-if="column.key === 'errorMsg'">

                    <span style="color: red;">{{ record.errorMsg }}</span>
                </template>

                <template v-if="column.key === 'params'">

                    <a-tooltip placement="top">
                        <template #title>
                            <vue-json-pretty :data="record.params"></vue-json-pretty>
                        </template>
                        {{ record.params }}
                    </a-tooltip>
                </template>

                <template v-if="column.key === 'result'">
                    <a-tooltip placement="top">
                        <template #title>
                            <json-viewer :value="record.result" copyable boxed sort theme="jv-light" />
                        </template>
                        {{ record.result }}
                    </a-tooltip>

                </template>

                <template v-if="column.key === 'createTime'">

                    {{ $formatDate(record.createTime) }}
                </template>
            </template>
        </a-table>
        <a-pagination :show-total="count => `共 ${count} 条`" v-model:current="current" v-model:pageSize="size"
            :total="count" @change="changePage" />
    </a-card>


    <LogModal ref="modalRef" />
</template>
<script setup>
import { JsonViewer } from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css";
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import LogModal from './component/modal.vue'

import { columns } from '.'
import { pageN } from '@/api/log';

//数据
const data = ref([])
//总数
const count = ref(0);

//当前页码
const current = ref(1);
//当前页条数
const size = ref(10)
//弹框
const modalRef = ref()
onMounted(() => {
    pageList({})
})
//获取数据
const pageList = (params) => {
    params.current = current.value;
    params.pageSize = size.value;
    pageN(params).then(res => {
        const { total, records } = res.data;
        data.value = records
        count.value = total;

    })
}


//改变页码
const changePage = (page, pageSize) => {
    current.value = page;
    pageList({})
};


//打开弹框
const addModalBt = () => {
    modalRef.value.openModal()
}




</script>

<style scoped></style>